<template>
	<div id="app">
		<el-container>
			<el-header>
				<div class="logo_img" @click="handleSelect('1')">
					<div style="display:flex; align-items: center; float:left; height: 65px;">
						<div class="header-logo">
							<img id="header-img" src="../assets/logo.png">
						</div>
			 	</div>
					<div style="display:flex; float:left; height: 65px;">
						<div class="header-important">
							<div class="company_name">OpenAPP</div>
							<div class="header-title company_name"></div>
			 		</div>
					</div>


				</div>


				<div id="menu_index">
					<!-- web端菜单导航 -->
					<el-menu v-if="seen" :default-active="activeIndex" class="el-menu-demo" menu-trigger="click"
						text-color="#333" style=" border:0;" mode="horizontal" @select="handleSelect">
						<el-menu-item index="1" class="header-title">Home</el-menu-item>
						<el-menu-item index="2">Usage</el-menu-item>
						<el-menu-item index="4">ChartGPT</el-menu-item>
						<el-menu-item index="3">提反馈</el-menu-item>

						<!-- <el-menu-item index="4" v-if="isToken != null">控制台</el-menu-item> -->
					</el-menu>
					<!-- 手机端菜单导航 v-bind:style="{backgroundColor:'#409EFF'}" -->
					<el-menu v-if="!seen && !isOpenConsole" :default-active="activeIndex" class="el-menu-demo"
						menu-trigger="click" text-color="#333" style="height: 65px; border:0;" mode="horizontal"
						@select="handleSelectMobile">
						<div style="display:flex; float:right; height: 65px;">
							<el-button type="text" @click="toKztMobile">控制台</el-button>
						</div>
						<el-submenu index="1" class="header-title mobile_menu">
			  		<template slot="title"><i class="el-icon-s-operation"></i></template>
							<el-menu-item index="1" class="header-title">Home</el-menu-item>
							<el-menu-item index="2">Usage</el-menu-item>
							<el-menu-item index="4">ChartGPT</el-menu-item>
							<el-menu-item index="3">提反馈</el-menu-item>
							<!-- <el-menu-item index="4">ChartGPT</el-menu-item> -->
						</el-submenu>
					</el-menu>
					<el-menu v-if="!seen && isOpenConsole" :default-active="activeIndex" class="el-menu-demo"
						menu-trigger="click" text-color="#333" style="height: 65px; border:0;" mode="horizontal"
						@select="handleSelectMobile">
						<div style="display:flex; float:right; height: 65px;">
							<div style=" line-height: 65px; ">
								<el-button @click="clickDrawer" size="mini" icon="el-icon-s-operation"></el-button>
							</div>
						</div>

					</el-menu>
				</div>
				<div v-if="seen" style="float: right; display: flex;align-items: center; height: 100%;">
					<div v-if="isToken == null">
						<el-button type="text" style="margin-right: 20px;" class="header-title" @click="login">登录
						</el-button>
						<el-button type="primary" class="header-title" @click="register" round>注册</el-button>
					</div>
					<div v-if="isToken != null">
						<el-button size="mini" round class="btn-kzt" @click="toKzt">控制台</el-button>
						<el-dropdown @command="handleCommand">
					  <span class="el-dropdown-link">
								欢迎,{{username}}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command="logout">注销</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>

					</div>

				</div>
			</el-header>
			<el-main>
				<div class="container" style="clear: both;">
					<router-view></router-view>
				</div>
			</el-main>
			<el-footer>
				<div style="width: 100%;">
					<div style="height:1px;padding:0;background-color:#ebebeb;">
					</div>
				</div>
				<div id="footer-ban" style="width: 100%;margin: 20px auto;">
					<el-row>
						<el-col :xs="24" :sm="24">
							<div style="margin: 0 auto;" class="footer_font">
								©Copyright © 2023 OpenApp All rights reserved.
							</div>
						</el-col>
					</el-row>
				</div>
				<div id="back_to_top" ref="btn" @click="backTop" style="display: none;">
			 	<p style="font-size: 0.625em; font-weight: bold">TOP</p>
					<img src="../assets/other/launch.png" style="height: 45px;width: 35px" />
				</div>
			</el-footer>
		</el-container>

		<!-- 登录 -->
		<Login :centerDialogVisible="loginShow" @click="clickDialog" :password="password" :title="title"
			v-bind:isLogin.sync="isLogin">
			<!-- :isLogin="isLogin" -->

		</Login>
	</div>
</template>

<script>
	import Login from "./Login.vue"
	import Vue from 'vue'
	import axios from "axios";
	import {baseUrl} from '../utils/global.js'
	export default {
		name: "Layout",
		components: {
			Login
		},
		data() {
			return {
				activeIndex: '1',
				company: {
					qrcode: require("../../static/other/公众号二维码.jpg"),
				},
				scroll: '',
				timer: '',
				seen: true,
				currentMenu: 'Home',
				loginShow: false,
				password: "",
				isLogin: true, // 弹框使用
				title: "",
				isToken: "",
				username: "",
				isOpenConsole: false, // 是否打开控制台
			};
		},
		methods: {
			handleSelect(key) {
				switch (key) {
					case '1':
						this.$router.push({
							name: "Index"
						});
						this.activeIndex = "1"
						break;
					case '2':
						this.$router.push({
							name: "Usage"
						});
						this.activeIndex = "2"
						break;
					case '3':
						this.$router.push({
							name: "Opinions"
						});
						this.activeIndex = "3"
						break;
					case '4':
						this.$router.push({
							name: "ChartGPT"
						});
						this.activeIndex = "4"
						break;

				}
			},
			handleSelectMobile(key) {
				switch (key) {
					case '1':
						this.$router.push({
							name: "Index"
						});
						this.activeIndex = "1"
						break;
					case '2':
						this.$router.push({
							name: "Usage"
						});
						this.activeIndex = "2"
						break;
					case '3':
						this.$router.push({
							name: "Opinions"
						});
						this.activeIndex = "3"
						break;
					case '4':
						this.$router.push({
							name: "ChartGPT"
						});
						this.activeIndex = "4"
						break;

				}
			},
			handleScroll() {
				this.scroll = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度
				if (this.scroll > 600) { //判断滚动后高度超过400px,就显示
					this.$refs.btn.style.display = 'block';
				} else {
					this.$refs.btn.style.display = 'none'
				}
			},
			backTop() { //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
				this.timer = setInterval(() => {
					let osTop = document.documentElement.scrollTop || document.body.scrollTop;
					let ispeed = Math.floor(-osTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
					if (osTop === 0) {
						clearInterval(this.timer)
					}
				}, 30)
			},
			/* 登录 */
			login() {
				this.loginShow = true
				this.isLogin = true
				this.title = "欢迎登录"
			},
			/* 注册 */
			register() {
				this.loginShow = true
				this.isLogin = false
				this.title = "欢迎注册"
				// window.open('https://admin.fastice-tech.com/registe')
			},
			/* 注销 */
			handleCommand(command) {
				switch (command) {
					case "logout":
						this.logout()
						break;
				}
			},
			/* 退出登录 */
			logout(){
				const config = {
					headers: {
						"Authorization": "bearer " + Vue.$cookies.get('token'),
					}
				};
				axios.get(baseUrl + "/user/logout/", config).then(res => {
					if(res.status == 200){
						Vue.$cookies.remove('token')
						Vue.$cookies.remove('username')
						this.isToken = null
						this.$message.success("退出登录成功")
						this.$router.push({
							name: "Index"
						});
						this.currentMenu = 'Home';
					}
				})
				.catch(res => {
				  this.$message.error(res.response.data.detail);
				});
			},

			/* 点击出现弹框 */
			clickDialog() {
				this.loginShow = false
				this.isLogin = true
				this.isToken = Vue.$cookies.get('token')
				this.username = Vue.$cookies.get('username')

			},

			menuSeen() {
				// 屏幕尺寸
				let screenHeight = document.body.clientWidth;
				if (screenHeight > 415) {
					this.seen = true;
				} else {
					this.seen = false;
				}
			},
			logoClick() {
				this.$router.push({
					name: "Index"
				});
				this.currentMenu = 'Home';
			},
			/* 去控制台 */
			toKzt() {
				this.$router.push({
					name: "Console"
				});
			},
			/* 手机端去控制台 */
			toKztMobile() {
				this.isOpenConsole = true;
				this.$router.push({
					name: "Console"
				});
			},
			/* 点击控制台菜单 */
			clickDrawer(){
				this.$store.state.isclickDrawer = true
			}

		},
		mounted() {
			this.menuSeen()
			window.addEventListener('scroll', this.handleScroll)
			// 判断是否登录
			this.isToken = Vue.$cookies.get('token')
			this.username = Vue.$cookies.get('username')
		},
		computed: {
			listenComponentState() {
				return this.$store.state.isLogin
			},
			listenUserName() {
				return this.$store.state.username
			},
			listenOpenConsole() {
				return this.$store.state.isOpenConsole
			}
		},
		watch: { //监听全局变量的变化
			listenComponentState: function(val, oldval) {
				this.isToken = val
			},
			listenUserName: function(val, oldval) {
				this.username = val
			},
			listenOpenConsole: function(val, oldval) {
				console.log("全局监听是否打开控制台：", val)
				this.isOpenConsole = val
			},
		},
	}
</script>

<style scoped>
	.logo_img {
		float: left;
		width: 30%;
		cursor: pointer;
	}

	#back_to_top {
		position: fixed;
		bottom: 50px;
		right: 30px;
		cursor: pointer
	}

	#footer-ban {
		bottom: 50px;
		right: 30px;

	}

	.header-title {
		font-size: 1em;
	}

	.el-main {
		--tw-bg-opacity: 1;
		background-color: rgb(248 250 252/var(--tw-bg-opacity));
		padding: 0;
	}

	.company_name {
		font-weight: normal;
		font-size: 1em;
	}

	.footer_font {
		--tw-text-opacity: 1;
		color: rgb(100 116 139/var(--tw-text-opacity));
		text-align: center;
	}

	.footer_svg {
		fill: #64748b;
	}

	#menu_index {
		float: left;
		width: 40%;
		height: 100%;
	}

	.header {
		margin: auto;
		width: 90%;
		/* height: 65px; */

	}

	@media screen and (max-device-width: 415px) {
		.logo_img {
			float: left;
			width: auto;
			cursor: pointer;
		}

		#back_to_top {
			position: fixed;
			bottom: 50px;
			right: 5px;
			cursor: pointer
		}

		.footer_font {
			font-size: 0.875em;
		}

		#menu_index {
			float: right;
			width: auto;
			height: 100%
		}

		.mobile_menu {}
	}

	#header-img {
		width: 50px;
		height: 50px;
		float: left;
		margin: auto;
	}

	.header-logo {
		height: 50px;
		width: 50px;
		align-self: center;
	}

	.header-important {
		float: left;
		margin-left: 6px;
		align-self: center;
	}

	.footer {
		display: flex;
		align-items: center;
		margin: 10px auto;
		width: 90%;
	}

	a {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	.btn-kzt {
		margin-right: 10px;
	}
</style>
